<template>
  <div>
    <h1>菜单</h1>
    <pre>
    组件名:el-menu
               router:是否开启路由模式，默认false
               default-active:默认选中项的index的值
        单层菜单
             el-menu-item
                 默认插槽 :icon显示
                 具名插槽（title）:标题内容
        多层菜单
             el-submenu
                具名插槽（title）:整个项的内容
                默认插槽：子集的内容

    需求：
       首页
       联系我们
       城市
          广东
            深圳
   </pre>
    <el-button
      type="primary"
      @click="collapse = !collapse"
    >控制菜单展开与收起</el-button>
    <el-menu router :default-active="$route.path" :collapse="collapse">
      <el-menu-item index="/dashboard">
        <i class="el-icon-star-off" />
        <template #title> 首页 </template>
      </el-menu-item>
      <el-menu-item index="/test">
        <i class="el-icon-star-off" />
        <template #title> 联系我们 </template>
      </el-menu-item>
      <el-submenu index="1">
        <template #title>
          <i class="el-icon-star-off" />
          <span>城市</span>
        </template>
        <el-submenu index="1-1">
          <template #title>
            <i class="el-icon-star-off" />
            <span>广东</span>
          </template>
          <el-menu-item index="1-1-1">
            <i class="el-icon-star-off" />
            <template #title> 深圳 </template>
          </el-menu-item>
        </el-submenu>
      </el-submenu>
    </el-menu>
  </div>
</template>
<script>
export default {
  data() {
    return {
      collapse: false
    }
  }
}
</script>
<style></style>
